<template>
	<view>
		<view class="bg"></view>

		<view class="white-card info">
			<view class="personinfo">
				<!-- <open-data class="avatar" type="userAvatarUrl"></open-data>
				<open-data type="userNickName"></open-data> -->
				<image class="avatar" :src="avatarUrl"></image>
				<button v-if="isCanUse" type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
					授权登录
				</button>
				<text v-else>{{nickName}}</text>
			</view>
			<view class="moneyinfo">
				<view class="flex_h">
					<view class="content">
						<image class="icon" src="../../static/icon/money.png"></image>
						<text>总收益</text>
					</view>
					<u-button type="primary" shape="circle" :custom-style="customStyle">{{cashmoney}}</u-button>
				</view>
				<view class="h_line"></view>
				<view class="flex_h">
					<view class="content">
						<image class="icon" src="../../static/icon/money.png"></image>
						<text>总余额</text>
					</view>
					<u-button type="primary" shape="circle" :custom-style="customStyle">{{money}}</u-button>
				</view>
			</view>
		</view>

		<view class="white-card main">
			<view v-for="(item,index) in iconList" :key="index" @click="handleJump(item.path)" class="icons">
				<image class="icon" :src="item.url"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="invitation">

				<view class="top">
					<text class="text">邀请规则</text>
				</view>
				<view class="text2">
					<ul class="ul">
						<li class="li">预约码上线登记时间：每天上午9：00-17：00</li>
						<p class="p">每次预约人数上限为100000人，约满为止。当天下午17：00开始付款，活动仅限关注“水浒盲盒”的粉丝参加，每位粉丝仅限登记每次预约人数上限为100000人，约满为止。当天下午17：00始付款，活动仅限关注“水浒盲盒”的粉丝参加，每位粉丝仅限登记
						</p>
					</ul>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="activity" type="bottom">
			<view class="invitation">

				<view class="top">
					<text class="text">活动规则</text>
				</view>
				<view class="text2">
					<ul class="ul">
						<li class="li">预约码上线登记时间：每天上午9：00-17：00</li>
						<p class="p">每次预约人数上限为100000人，约满为止。当天下午17：00开始付款，活动仅限关注“水浒盲盒”的粉丝参加，每位粉丝仅限登记每次预约人数上限为100000人，约满为止。当天下午17：00始付款，活动仅限关注“水浒盲盒”的粉丝参加，每位粉丝仅限登记
						</p>
					</ul>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uButton from "../../uview-ui/components/u-button/u-button.vue";
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uButton
		},
		data() {
			return {
				customStyle: {
					background: "linear-gradient(90deg, #68C0C0, #C2F6DC)",
					boxShadow: "-2px -1px 6px 1px rgba(29, 118, 120, 0.35)",
					color: "#202020",
					fontSize: "30rpx",
					padding: "0 80rpx"
				},
				iconList: [{
					url: '/static/icon/orderform@2x.png',
					name: '我的订单',
					path: '../order/order'
				}, {
					url: '/static/icon/order@2x.png',
					name: '我的预约',
					path: '../subscribe/subscribe'
				}, {
					url: '/static/icon/position@2x.png',
					name: '我的位置',
					path: '../invite/invite'
				}, {
					url: '/static/icon/bill@2x.png',
					name: '我的账单',
					path: '../bill/bill'
				}, {
					url: '/static/icon/binduser@2x.png',
					name: '绑定账户',
					path: '../invite/invite'
				}, {
					url: '/static/icon/unbind@2x.png',
					name: '解除绑定',
					path: '../invite/invite'
				}, {
					url: '/static/icon/rule@2x.png',
					name: '邀请规则',
					path: '邀请规则'
				}, {
					url: '/static/icon/invite@2x.png',
					name: '我的邀请',
					path: '../invite/invite'
				}, {
					url: '/static/icon/feedback@2x.png',
					name: '提交反馈',
					path: '../feedback/feedback'
				}, {
					url: '/static/icon/help@2x.png',
					name: '帮助中心',
					path: '../help/help'
				}, {
					url: '/static/icon/help@2x.png',
					name: '活动规则',
					path: '活动规则'
				}],
				code: "",
				nickName: "",
				avatarUrl: "",
				cashmoney: 0.00,
				money: 0.00,
				encryptedData: '',
				iv: '',
				isCanUse: true //默认为true
			};
		},
		onLoad() {
			let _this = this;

			uni.getStorage({
				key: 'isCanUse',
				success(res) {
					console.log('isCanUse', res);
					_this.isCanUse = res.data;
					_this.updateUserInfo();
				},
				fill() {
					consoe.log('没有存储');
				}
			})
		},
		methods: {
			//第一授权获取用户信息===》按钮触发
			wxGetUserInfo() {
				let _this = this;
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log('授权时', infoRes);
						_this.nickName = infoRes.userInfo.nickName; //昵称
						_this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
						_this.encryptedData = infoRes.encryptedData;
						_this.iv = infoRes.iv;
						try {
							_this.isCanUse = false;
							uni.setStorageSync('isCanUse', false); //记录是否第一次授权  false:表示不是第一次授权
							_this.login();
						} catch (e) {}
					},
					fail(res) {}
				});
			},
			//微信登录
			login() {
				let _this = this;
				uni.showLoading({
					title: '登录中...'
				});
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log('login', loginRes);
						_this.code = loginRes.code;
						//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
						_this.$api.wechatLogin({
							code: loginRes.code,
							encryptedData: _this.encryptedData,
							iv: _this.iv
						}).then(res => {
							uni.setStorageSync("token", res.data.access_token);
							_this.updateUserInfo();
							uni.hideLoading();
						})
					},
				});
			},
			//向后台更新信息
			updateUserInfo() {
				this.$api.getUserInfo().then(res => {
					this.nickName = res.data.name;
					this.avatarUrl = res.data.avatar;
					if (res.money) {
						this.money = res.data.money;
					}
					this.cashmoney = res.data.cashmoney;
				})
			},
			handleJump(url) {
				console.log(url)
				if (url == "邀请规则") {
					this.$refs.popup.open()
				}
				if (url == "活动规则") {
					this.$refs.activity.open()
				} else {
					uni.navigateTo({
						url: url,
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invitation {
		height: 970rpx;
		width: 748rpx;

		.top {
			height: 129rpx;
			width: 749rpx;
			background-color: #E2FEFF;
			border-radius: 5% / 37% 37% 0 0;
			padding: 40rpx;
		}

		.text {
			margin-left: 250rpx;
			font-size: 36rpx;
			font-weight: 700;
		}

		.text2 {
			height: 843rpx;
			width: 749rpx;
			background-color: #FFFFFF;
		}

		.ul {
			list-style: none;
			padding: 45rpx;
		}

		.li {
			font-size: 30rpx;
			font-weight: 500;
			margin-left: 30rpx;
			margin-bottom: 20rpx;
		}

		ul li:before {
			content: "";
			float: left;
			width: 20rpx;
			height: 20rpx;
			margin: 10rpx -35rpx;
			background-color: #1AB0B4;
			border-radius: 50%;
		}

		.p {
			text-indent: 30px;
			font-size: 25rpx;
			font-size: 300;
			margin-bottom: 20rpx;
		}

	}


	.bg {
		width: 100%;
		height: 393rpx;
		// background-image: url(/static/img/personbg.png);
		// background-position: 0% 0%;
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
	}

	.info {
		height: 320rpx;
		margin: -160rpx 30rpx 0 30rpx;
		position: relative;

		.personinfo {
			position: absolute;
			top: -75rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.avatar {
				width: 149rpx;
				height: 149rpx;
				margin-bottom: 24rpx;
				border-radius: 50%;
			}

			text {
				font-size: 24rpx;
				font-weight: bold;
				color: #202020;
			}
		}

		.moneyinfo {
			display: flex;
			justify-content: space-around;

			.h_line {
				width: 1rpx;
				height: 110rpx;
				background: #FFFFFF;
				border: 3rpx solid #E5E5E5;
				margin-top: 140rpx;
			}

			.flex_h {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-top: 140rpx;

				.content {
					text-align: center;
					margin-bottom: 30rpx;

					.icon {
						width: 26rpx;
						height: 26rpx;
						margin-right: 8rpx;
					}
				}
			}
		}

	}

	.main {
		height: 554rpx;
		margin: 60rpx 30rpx 30rpx 30rpx;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		padding: 60rpx 0;

		.icons {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 25%;
			height: 120rpx;

			.icon {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 15rpx;
			}

			text {
				font-size: 24rpx;
				color: #3C3C3C;
			}
		}
	}
</style>
